JavaScript Ajax jQuery 文件上传异步上传

1 基本原理

1.1 定制UI

label 标签下面嵌套<input type="file">点击label会自动打开文件浏览框，这个是W3C的约定，点击标签触发跟标签关联的第一个表单元素，或者标签内嵌的第一个表单元素。参考：W3School,W3C（这个英文更容易看懂，不信试试看，^_^）。

这样我们就可以在Label外面包裹样式元素，然后我们需要把原生的文件上传控件搞掉，最简单的方式是隐藏。但是这个在万恶的低版本IE中（IE8）下是不行的，我们可以将这个控件变透明，然后。。。，参考：IE8 Label for input file 无效;当然也可以使用Flash来解决这个问题，plupload就是这么做的,采用事件传递的形式，给定一个触发元素，然后自动生成一个跟这个触发元素关联的file元素，点击这个触发元素的时候执行file的动作。

要解决的问题如下：

定义自己的btn样式
将file input 变透明；opacity:0;filter:alpha(opacity=0) IE8;
将file input 叠于文字上方
将file input 放大，并将原生的文件上传按钮对准，btn容器，这里放大然后把多的切掉，overflow：hidden；

      <style type="text/css">
        .btn_container{
            position:relative;
            width:120px;
            height:40px;
            line-height:40px;
            color: #563d7c;
            background-color: transparent;
            border: 2px solid #563d7c;
            border-radius: 6px;
            overflow:hidden;
            text-align:center;
        }
    
        .file_input{
            position:absolute;
            opacity:0;
            filter:alpha(opacity=0);
            z-index:1;
            font-size:300%;
            left:-550px;
        }
    
        .btn{
            padding: 10px 16px;
            font-size: 18px;
        }
    </style>
    <div class="btn_container">
        <label>
            <input type="file" class="file_input"><span class="btn">点选文件</span>
        </label>
    </div>

1.2 自动上传

监听<input type="file">的change事件，如果改变，则触发文件上传。

1.3 异步HTTP上传

使用enctype='multipart/form-data'的表单提交，传输content-type:text/plain的字节流数据。使用隐藏的iframe来提交表单，实现视区内页面无刷新。

2 组件推荐

在这二十来个上传组件或插件中，根据可定制UI，支持度较广（仅支持Flash或HTML5的就pass），网站能打开，有能上手的实例等条件过滤掉了一些像ajaxfileupload，uploadify等还不错的资源，留下下面这些个。

2.1 plupload

自动切换多种方式的支持，有国际化的支持，支持自定义容器。

2.1.1 参考资料

2.2 jquery file upload

样式不错，引入的库较多，只支持绑定input file。

2.2.1 参考资料

2.3 jQuery Ajax File Uploader / uploader

有进度，有预览，不支持IE8；

2.4 参考资料

JQuery File Uploader

2.5 JSAjaxFileUploader